* {
  margin: 0;
  padding: 0;
}
body {
  font-size: 0.8rem;
  background-color: #fff;
}
ul {
  list-style-type: none;
}
a {
  text-decoration: none;
  color: #c1c1c1;
}
a:hover {
  text-decoration: none !important;
}
.centre {
  width: 100%;
}
.centres {
  width: 90%;
  margin: 10px auto;
}
.cent {
  width: 80%;
  margin: 20px auto;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.flexs {
  display: flex;
  justify-content: space-around;
}
.show {
  display: block !important;
}
#mobile-nav {
  display: none;
}
// 头部
.renovation-hearder {
  position: relative;
  // tou-top
  .main-top {
    display: flex;
    justify-content: end;
    li {
      border-right: 1px solid #c1c1c1;
      padding: 0 20px;
      box-sizing: border-box;
      &:last-child {
        border-right: 0;
      }
      a {
        color: #c1c1c1;
      }
    }
    @media (max-width: 1024px) {
      display: none;
    }
  }
  // tou-bottom
  .main-bottom {
    .logo {
      img {
        display: block;
        min-width: 120px;
      }
    }
    // 导航
    .main-nav {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      justify-content: center;
      li {
        padding: 0 20px;
        box-sizing: border-box;
        position: relative;
        .hot {
          position: absolute;
          width: 13px;
          left: 8px;
          top: -3px;
        }
        .active {
          border-bottom: 2px solid #000;
          color: #000;
        }
        a {
          color: #000;
          line-height: 45px;
          margin-top: 10px;
        }
        a:hover {
          border-bottom: 2px solid #000;
          color: #000;
        }
      }
      @media (max-width: 1024px) {
        display: none;
      }
    }
    // 搜索
    .main-search {
      background-color: #f4f5f9;
      border-radius: 5px;
      padding: 10px;
      box-sizing: border-box;
      display: flex;
      .bule {
        color: #2259ce;
        border-right: 1px solid #c1c1c1;
        padding: 0 5px 0 0;
        box-sizing: border-box;
      }
      input {
        border: 0;
        background: url(../img/search.png) no-repeat right #f4f5f9;
        padding: 0 5px;
        box-sizing: border-box;
        background-size: 20px;
        outline: none;
      }
      @media (max-width: 1024px) {
        display: none;
      }
    }
    // more
    .more {
      display: none;
      img {
        display: block;
        width: 30px;
        height: 30px;
      }
      @media (max-width: 1024px) {
        display: block;
      }
    }
    .mobile-nav {
      position: absolute;
      right: 25px;
      bottom: -155px;
      z-index: 10;
      width: 150px;
      text-align: center;
      background-color: #f4f5f9;
      border-radius: 5px;
      li {
        a {
          display: block;
          color: #000;
          line-height: 30px;
          &:hover {
            background-color: #8e7f78;
            color: #fff;
          }
        }
        .mobile-active {
          background-color: #8e7f78;
          color: #fff;
        }
      }
    }
  }
}
// 轮播图
.swipers {
  img {
    display: block;
    width: 100%;
    min-height: 300px;
    object-fit: cover;
  }
  min-height: 300px;

  .swiper-button-next:after,
  .swiper-button-prev:after {
    background-color: rgb(70 70 68 / 50%);
    color: #fff;
    padding: 5px;
  }
}
// 内容
.container-list {
  border-bottom: 1px solid #ccc;
  box-sizing: border-box;
  justify-content: space-around;
  .main-list {
    img {
      display: block;
      width: 60%;
      margin: 20px auto;
    }
  }
  @media (max-width: 1024px) {
    width: 100%;
  }
}
.container-company {
  .company-title {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    .tit-left {
      h3 {
        font-weight: 600;
      }
      span {
        line-height: 30px;
        display: inline-block;
        margin-right: 5px;
        background-color: #ccc;
        width: 30px;
        text-align: center;
        @media (max-width: 1024px) {
          display: none;
        }
      }
    }
  }
}
.company-content {
  margin: 15px 0;
  .myswiper {
    width: 100%;
    .swiper-wrapper {
      width: 100%;
    }
    .swiper-slide {
      width: 20%;
    }
    @media (max-width: 1024px) {
      display: none;
    }
  }
  .far {
    border-radius: 10px;
    .fater {
      position: relative;
      .img img {
        display: block;
        width: 100%;
        border-radius: 10px 10px 0 0;
      }
      .posi {
        position: absolute;
        bottom: 10px;
        left: 15px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
    }
    .written {
      padding: 10px 10px 30px 10px;
      box-sizing: border-box;
      border: 1px solid #ccc;
      border-radius: 0 0 10px 10px;
      h4 {
        font-weight: 550;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .written-an {
        display: flex;
        flex-wrap: wrap;
        .anli {
          margin-right: 30px;
          span {
            color: red;
          }
          &:last-child {
            margin-right: 0;
          }
        }
      }
      .written-order {
        margin-top: 10px;
        a {
          border-radius: 10px;
          margin-top: 15px;
          border: 1px solid #7c7ae7;
          color: #7c7ae7;
        }
      }
    }
    &:hover {
      transform: scale(1.01, 1.01);
      box-shadow: 1px 1px 10px #ccc;
    }
  }
}
.mobile-company {
  width: 100%;
  .far {
    width: 24%;
    @media (max-width: 1024px) {
      width: 48%;
    }
  }
}

// 精美效果图
.container-exquisite {
  .exquisite-nav {
    display: flex;
    
    li {
      padding-right: 15px;
      box-sizing: border-box;
      &:last-child {
        padding-right: 0;
      }
      a {
        color: #000;
        &:hover {
          color: #2357cd;
        }
      }
      .actives {
        color: #2357cd;
      }
    }
  }
  //内容
  .exquisite-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    position: relative;
    .cont-one {
      width: 50%;
      .swiperi {
        width: 100%;
      }
      .swiper-horizontal > .swiper-pagination-bullets,
      .swiper-pagination-bullets.swiper-pagination-horizontal {
        bottom: 30px;
        left: 10px;
        width: 100%;
      }
      .swiper-pagination {
        text-align: left;
      }
      .swiper-pagination-bullet-active {
       width: 20px;
       border-radius: 10px;
        background-color:#fcaf3d !important;
      }
      .swiper-pagination-bullet {
        
        background:#184fce ;
        opacity: 1;
    }

      .far {
        border-radius: 10px;
        .fater {
          position: relative;
          .img img {
            border-radius: 10px 10px 0 0;
            display: block;
            width: 100%;
          }
          .posi {
            position: absolute;
            top: -3px;
            left: 10px;
            img {
              display: block;
              width: 50px;
            }
          }
        }
        .written {
          border: 1px solid #ccc;
          border-radius: 0 0 10px 10px;
          padding: 10px 10px 20px 10px;
          box-sizing: border-box;
          // border-top: 0;
          h4 {
            color: #000;
            font-size: 1.5rem;
          }
          p {
            font-size: 0.7rem;
            color: #ccc;
          }
        }
      }
      @media (max-width: 1024px) {
        width: 100%;
      }
    }
    .cont-two {
      width: 24%;
      height: 100%;
      position: relative;
      .phon {
        img {
          display: block;
          width: 100%;
          border-radius: 10px;
          min-height:500px;
          @media (max-width: 1024px) {
          height: auto;
          min-height:auto;
          }
        }
        
      }
      .gay {
        position: absolute;
        background-color: rgba($color: #4d3d30, $alpha: 0.7);
        color: #fff;
        bottom: 40px;
        left: 0;
        line-height: 30px;
        width: 100%;
        text-align: center;
      }
      @media (max-width: 1024px) {
        width: 48%;
      }
    }
  }
}
// 学习装修知识
.container-knowledge {
  .more {
    
    border: 1px solid #2357cd;
    color: #2357cd;
    border-radius: 10px;
    a{
      display: block ;
      padding:  0 12px;
      line-height: 22px;
    }
  }
  .knowledge-content {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin: 10px 0;
    .know-wiki {
      width: 24%;
      .wiki-photo {
        width: 100%;
        position: relative;
        .pho img {
          display: block;
          width: 100%;
          border-radius: 10px 10px 0 0;
        }
        .gays {
          display: none;
          width: 100%;
          height: 100%;
          background-color: rgba($color: #9e9e9c, $alpha: 0.3);
          z-index: 10;
          position: absolute;
          left: 0;
          bottom: 0;
          color: #fff;
          text-align: center;
          font-size: 2.5rem;
          font-weight: normal;
          line-height: 22rem;
          border-radius: 10px 10px 0 0;
        }
        &:hover {
          .gays {
            display: block;
          }
        }
      }
      .wiki-introduce {
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius: 0 0 10px 10px;
        .introduce-top {
          display: flex;
          justify-content: space-between;
          margin-bottom: 5px;
          &:last-child {
            margin-bottom: 0;
          }
          .top-zp {
            width: 30%;
            img {
              display: block;
              width: 100%;
              // height:60px;
             max-height:60px;
            }
          }
          .top-wenzi {
            width: 65%;
            .tit {
              color: #000 !important;
              font-size: 1.4rem !important;
              padding: 0;
              white-space: nowrap !important;
              overflow: hidden;
              text-overflow: ellipsis;
            }
            p {
              padding: 0;
              margin: 0;
              color: #7d7d7d !important;
              font-size: 0.7rem;
              display: -webkit-box;
              overflow: hidden;
              white-space: normal !important;
              text-overflow: ellipsis;
              word-wrap: break-word;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
            }
          }
        }
        .introduce-bottom {
          margin: 10px 0;
          li {
            background: url(/img/dash.png) no-repeat left center;
            background-size: 15px;
            padding: 0 15px;
            a {
              font-size: 0.75rem;
              display: block;
              color: #7d7d7d;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
      @media (max-width: 1024px) {
        width: 48%;
        &:nth-child(2n) {
          display: none;
        }
      }
    }
  }
}
// 装修问题
.question-content {
  background-color: #f4f5f9;
  border-radius: 10px;
  padding: 40px;
  box-sizing: border-box;
  .ques-one {
    .one-tit {
      font-size: 1.5rem;
      color: #000;
      background: url(/img/34.jpg) no-repeat left center;
      background-size: 20px;
      padding-left: 30px;
      box-sizing: border-box;
      font-weight: 550;
    }
    p {
      padding-left: 30px;
      box-sizing: border-box;
      line-height: 30px;
      display: -webkit-box;
      overflow: hidden;
      white-space: normal !important;
      text-overflow: ellipsis;
      word-wrap: break-word;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .one-comment {
      padding-left: 30px;
      box-sizing: border-box;
      display: flex;
      margin-bottom: 25px;
      flex-wrap: wrap;
      .com-left {
        margin-right: 30px;
        img {
          display: inline-block;
          width: 20px;
          height: 20px;
          border-radius: 50%;
        }
      }
      .com-right {
        display: flex;
        justify-content: center;
        span {
          color: #f00;
          display: inline-block;
        }
        img {
          margin-right: 10px;
          display: inline-block;
          width: 20px;
          height: 20px;
          border-radius: 50%;
        }
      }
    }
  }
}
// 数字快
.container-number {
  border: 1px solid #ccc;
  padding: 30px;
  box-sizing: border-box;
  border-radius: 10px;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  .num-one {
    text-align: center;
    .num-top {
      color: #fcaf3d;
      font-size: 2.5rem;
      font-weight: 550;
    }
    .num-bottom {
      color: #000;
      font-size: 1rem;
    }
  }
  @media (max-width: 790px) {
    .num-one {
      width: 48%;
      margin: 5px 0;
    }
  }
}
// 底部
.renovation-bottom {
  color: #a4a39f;
  font-size: 0.65rem;
  padding: 10px 0;
  box-sizing: border-box;
  background-color: #222222;
  .bottom-top {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .bot-left {
      width: 85%;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      border-bottom: 1px solid #ccc;
      .about-bot {
        h5 {
          color: #fff;
          span {
            color: #fbb03d;
          }
        }
        li {
          a {
            color: #a4a39f;
          }
        }
      }
    }
    .bot-right {
      width: 10%;
      img {
        display: block;
        width: 100%;
        margin-bottom: 10px;
      }
      text-align: center;
    }
  }
  .bottom-center {
    width: 85%;
    padding: 20px 0;
    color: #a4a39f;
    border-bottom: 1px solid #ccc;
    .cen-top {
      span {
        color: #fbb03d;
      }
    }
  }
  .bottom-bottom {
    width: 100%;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .bot-wen {
      width: 75%;
    }
    .bot-img {
      display: flex;
      width: 20%;
      justify-content: space-between;
      flex-wrap: wrap;
      img {
        display: block;
        width: 49%;
        height: 30px;
      }
    }
  }
  @media (max-width: 790px) {
    .centres {
      width: 100%;
      padding: 30px;
      box-sizing: border-box;
    }
    .bottom-top {
      .bot-left {
        width: 100%;
        .about-bot {
          width: 100%;
          text-align: center;
        }
      }
      .bot-right {
        width: 20%;
        margin: 10px auto;
      }
    }

    .bottom-center {
      width: 100%;
    }
    .bottom-bottom {
      flex-wrap: wrap;
      .bot-wen {
        width: 100%;
      }
      .bot-img {
        width: 45%;
        margin: 10px auto;
        img {
          width: 60%;
          margin: 10px 0;
        }
      }
    }
  }
}
